<template>
  <div class="card">
    <div class="common-left-title">项目基本信息</div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      require-asterisk-position="right"
      scroll-to-error>
      <el-row>
        <el-form-item label="申请企业全称" prop="companyName">
          <el-input v-model.trim="ruleForm.companyName" placeholder="请输入你的申请企业全称" />
        </el-form-item>
        <el-form-item label="申请企业统一社会信用代码" prop="socialCreditCodes">
          <el-input v-model.trim="ruleForm.socialCreditCodes" placeholder="根据企业全称自动联查统一社会信用代码" disabled />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="受益人名称" prop="beneficiaryName">
          <el-input v-model.trim="ruleForm.beneficiaryName" placeholder="请输入受益人名称" />
        </el-form-item>
        <el-form-item label="受益人类型" prop="beneficiaryType">
          <el-radio-group v-model="ruleForm.beneficiaryType">
            <el-radio value="1">法人主体</el-radio>
            <el-radio value="2">非法人主体</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-form-item label="法人主体名称" prop="legal" v-if="ruleForm.beneficiaryType==2">
        <el-input v-model.trim="ruleForm.legal" placeholder="请输入法人主体名称" />
      </el-form-item>
      <el-form-item label="开函金融机构" prop="financialOrgans">
        <el-select v-model="ruleForm.financialOrgans" placeholder="请选择">
          <el-option
            v-for="item in organsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="保函金额（元）" prop="guaranteeAmount">
          <el-input v-model.trim="ruleForm.guaranteeAmount" placeholder="请输入保函金额，单位元" />
        </el-form-item>
        <el-form-item label="保函期限（月）" prop="guaranteePeriod">
          <el-input v-model.trim="ruleForm.guaranteePeriod" placeholder="请输入保函期限，单位月" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="保函品种" prop="guaranteeVariety">
          <el-select v-model="ruleForm.guaranteeVariety" placeholder="请选择">
            <el-option
              v-for="item in organsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="保函分类" prop="guaranteeType">
          <el-select v-model="ruleForm.guaranteeType" placeholder="请选择">
            <el-option
              v-for="item in organsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model.trim="ruleForm.projectName" placeholder="请输入您的项目名称（全称）" />
        </el-form-item>
        <el-form-item label="项目来源" prop="projectSource">
          <el-select v-model="ruleForm.projectSource" placeholder="请选择">
            <el-option
              v-for="item in organsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="中标时间" prop="bidTime">
          <el-date-picker
            v-model="ruleForm.bidTime"
            type="date"
            placeholder="yyyy/mm/日"/>
        </el-form-item>
        <el-form-item label="项目所在地" prop="projectLocation">
          <el-input v-model.trim="ruleForm.projectLocation" placeholder="请输入保函期限，单位月" />
        </el-form-item>
      </el-row>
      <el-form-item label="保函格式模板" prop="formatTemplate">
        <el-radio-group v-model="ruleForm.formatTemplate">
          <el-radio value="1">固定模板（银行审核通过的固定出函模板）</el-radio>
          <el-radio value="2">自定义模板（自行上传出函模板）</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="保函格式类型" prop="formatType">
        <el-select v-model="ruleForm.formatType" placeholder="请选择">
          <el-option
            v-for="item in organsOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模板选择" prop="templateSelection" v-if="ruleForm.formatTemplate==1">
        <div class="form-template">
          <el-select
            v-model="ruleForm.templateSelection"
            placeholder="请选择" style="width: 200px;">
            <el-option
              v-for="item in organsOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary">在线预览</el-button>
        </div>
      </el-form-item>
      <el-form-item label="模板上传" v-else>
        <div class="form-template">
          <el-upload :show-file-list="false">
            <el-button type="primary">上传模版</el-button>
          </el-upload>
          <el-text type="warning">XXXXX.word/wordx/pdf</el-text>
        </div>
      </el-form-item>
      <el-row>
        <el-form-item label="预估保费" prop="storeQrCode">
          <el-input v-model.trim="ruleForm.storeQrCode" placeholder="自动测算仅供参考，以最终实际金额为准" disabled />
        </el-form-item>
        <el-form-item label="预估优惠后费用" prop="storeQrCodeAfter">
          <el-input v-model.trim="ruleForm.storeQrCodeAfter" placeholder="自动测算仅供参考，以最终实际金额为准" disabled />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
const ruleForm = reactive({
  // 申请企业全称
  companyName: '',
  // 申请企业统一社会信用代码
  socialCreditCodes: '',
  // 受益人名称
  beneficiaryName: '',
  // 受益人类型(法人主体 非法人主体)
  beneficiaryType: '',
  // 法人主体名称
  legal: '',
  // 开函金融机构
  financialOrgans: '',
  // 保函金额（元）
  guaranteeAmount: '',
  // 保函期限（月）
  guaranteePeriod: '',
  // 保函品种
  guaranteeVariety: '',
  // 保函分类
  guaranteeType: '',
  // 项目名称
  projectName: '',
  // 项目来源
  projectSource: '',
  // 中标时间
  bidTime: '',
  // 项目所在地
  projectLocation: '',
  // 保函格式模板(1-固定模版 2-自定义模版)
  formatTemplate: '1',
  // 保函格式类型
  formatType: '',
  // 模板选择
  templateSelection: '',
  // 预估保费
  storeQrCode: '',
  // 预估优惠后费用
  storeQrCodeAfter: '',
})
const rules = reactive({
  companyName: [{ required: true, message: '请输入你的申请企业全称', trigger: 'blur' }],
  beneficiaryName: [{ required: true, message: '请输入受益人名称', trigger: 'blur' }],
  beneficiaryType: [{ required: true, message: '请选择受益人类型' }],
  legal: [{ required: true, message: '请输入法人主体名称', trigger: 'blur' }],
  financialOrgans: [{ required: true, message: '请选择开函金融机构' }],
  guaranteeAmount: [{ required: true, message: '请输入保函金额' }],
  guaranteePeriod: [{ required: true, message: '请输入保函期限' }],
  guaranteeVariety: [{ required: true, message: '请选择保函品种' }],
  guaranteeType: [{ required: true, message: '请选择保函分类' }],
  projectName: [{ required: true, message: '请输入您的项目名称', trigger: 'blur' }],
  projectSource: [{ required: true, message: '请选择项目来源' }],
  bidTime: [{ required: true, message: '请选择中标时间' }],
})

// 金融机构枚举
const organsOptions = reactive([
  { label: '汉口汉口汉口汉口汉口汉口', value:'1111' },
  { label: '中信中信中信', value:'222' }
])


// 表单校验
const ruleFormRef = ref(null)
function validateForm() {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate(valid => {
      if (valid) {
        resolve(ruleForm)
      }
    })
  })
}

defineExpose({
  validateForm
})
</script>

<style lang="scss" scoped>
</style>
